<template>
  <div class="hot">
    <div class="hot-top">
      <span class="hot-back" @click="back"></span>
    </div>
    <div class="hot-hotgoods">
      <div class="hotgoods-title">
        <div class="title">
          <span>热销商品</span>
        </div>
        <div class="more" @click="menu">
          <span></span>
        </div>
      </div>
      <van-divider
        :style="{
          color: '#999999',
          borderColor: '#000',
          padding: '0 16px',
          marginTop: '5px',
        }"
      />
      <div class="hotgoods-list">
        <ul>
          <Hotlist
            v-for="(item, index) in hotListData"
            :key="index"
            :hotlistArr="item"
            :showPrice="isPrice"
          ></Hotlist>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Hotlist from "../components/Hotlist";
import "../assets/less/hot.less";
export default {
  name: "Hot",
  data() {
    return {
      hotListData: [],
      isPrice:false,
    };
  },
  components: {
    Hotlist,
  },
  created() {
    this.getHotListData();
  },
  methods: {
    back(){
      this.$router.go(-1);
    },
    getHotListData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          // console.log("res ==> ", res);
          this.$toast.clear();
          if (res.data.code == 500) {
            this.hotListData = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
    menu(){
      this.$router.push({name:"Menu"})
    },

  },
};
</script>